<template>
  <div class="table_file">
    <a-tooltip v-for="item in fileList" :key="item.uid" placement="bottom">
      <template #title>
        <span>{{item.name}}</span>
      </template>
      <svg class="iconfont tyle_icon" aria-hidden="true">
        <use :xlink:href="item.icon"></use>
      </svg>
    </a-tooltip>
  </div>
</template>

<script>
import { 
  updateRow
} from "@/api/worksheet";
export default {
	props: {
		value: {
			default: []
		},
    rowId: String,
    fieldName: String,
	},
	data(){
    return {
      fileList: []
    }
	},
  mounted(){
    let list = Array.isArray(this.value) ? this.value : []
    this.fileList = list.map(v => {
      let split = v.name.split('.')
      let type = split[split.length - 1]
      let icon = '#cgsIcon-file'
      if(type.includes('doc')){
        icon = '#cgsIcon-doc'
      } else if(type.includes('xls')){
        icon = '#cgsIcon-xls'
      } else if(type.includes('jpg')||type.includes('jpeg')){
        icon = '#cgsIcon-Jpg'
      } else if(type.includes('gif')){
        icon = '#cgsIcon-GIF'
      } else if(type.includes('png')){
        icon = '#cgsIcon-PNG'
      }
      return {
        name: v.name,
        icon,
        uid: v.uid
      }
    })
  }
}

</script>

<style lang="less">
.appPage{
  .table_file{
    padding: 0 10px;

    .tyle_icon{
      width: 1em;
      height: 1em;
      vertical-align: -0.15em;
      fill: currentColor;
      overflow: hidden;
      margin-right: 5px;
    }
  }
}
</style>